/*
 * @Author: yangzonglong
 * @Date: 2021-06-30 15:14:10
 * @version: v1.0.0
 * @Descripttion: Upload 控制器
 * @LastEditors: yangzonglong
 * @LastEditTime: 2023-05-26 14:34:48
 * @Auditor:
 */
import React, { useCallback, useState, useEffect } from 'react';
import { Form, InputNumber, Select, Input, Checkbox } from 'antd';
import update from 'immutability-helper';
import { UploadProps } from './Upload';
import useControlOptions from '../../hooks/useControlOptions';
import FormItemController from './../components/FormItemController';
import CodeMirror from './../codeMirror/CodeMirror';

const FormItem = Form.Item,
  Option = Select.Option,
  widthStyle = { width: '100%', marginBottom: '10px' };

export const fileDataSource = ['.png', '.jpg', '.jpeg', '.gif', '.pdf', '.xls', '.xlsx', '.zip', '.rar', '.txt', '.docx', '.doc', '.pptx', '.ppt'];

const UploadController = () => {
  const { options, changeFormItemProps, changeControlProps } = useControlOptions<UploadProps>('uploadProps');

  const [accept, setAccept] = useState<string[]>([]);

  useEffect(() => {
    const accept = options.uploadProps?.accept;
    setAccept(accept ? accept.split(',') : []);
  }, [options]);

  const changeAccept = useCallback(
    (e) => {
      changeControlProps(
        'uploadProps',
        update(options.uploadProps, {
          accept: { $set: e.join(',') },
        }),
        true
      );
    },
    [changeControlProps, options]
  );


  const changeMaxCount = useCallback(
    (e) => {
      changeControlProps(
        'uploadProps',
        update(options.uploadProps, {
          maxCount: { $set: e },
        }),
        true
      );
    },
    [changeControlProps, options]
  );

  const changeMaxSize = useCallback(
    (e) => {
      changeControlProps(
        'uploadProps',
        update(options.uploadProps, {
          maxSize: { $set: e.target.value },
        }),
        true
      );
    },
    [changeControlProps, options]
  );

  const changeUploadUrl = useCallback(
    (e) => {
      changeControlProps(
        'uploadProps',
        update(options.uploadProps, {
          uploadUrl: { $set: e.target.value },
        }),
        true
      );
    },
    [changeControlProps, options]
  );

  const changeDownloadUrl = useCallback(
    (e) => {
      changeControlProps(
        'uploadProps',
        update(options.uploadProps, {
          downloadUrl: { $set: e.target.value },
        }),
        true
      );
    },
    [changeControlProps, options]
  );

  const changeDownloadScriptText = useCallback(
    (e) => {
      changeControlProps(
        'uploadProps',
        update(options.uploadProps, {
          downloadScript: { $set: e },
        }),
        true
      );
    },
    [changeControlProps, options]
  );

  return (
    <>
      <FormItemController hidePlaceholder hideInitialValue onChange={changeFormItemProps} options={options?.formItemProps}>
        <FormItem label="上传文件最大体积" tooltip="输入后，可以设定文件大小范围，填写者上传超过规定大小的文件时会提示文件大小超过限制，无法上传">
          <Input onChange={changeMaxSize} value={options.uploadProps?.maxSize} addonAfter="MB" />
        </FormItem>

        <FormItem name='uploadUrl' label="上传文件地址">
          <Input onChange={changeUploadUrl} defaultValue={options.uploadProps?.uploadUrl} />
        </FormItem>

        <FormItem name='downloadUrl' label="下载文件地址">
          <Input onChange={changeDownloadUrl} defaultValue={options.uploadProps?.downloadUrl} />
        </FormItem>

        <CodeMirror
          label='自定义下载脚本'
          scriptText={options.uploadProps?.downloadScript}
          change={changeDownloadScriptText} />
      </FormItemController>

      <FormItem className="antd-form-item-row" label="限制文件个数">

      </FormItem>

      <InputNumber onChange={changeMaxCount} value={options.uploadProps?.maxCount} style={widthStyle} />

      <FormItem className="antd-form-item-row" label="限制文件类型"> </FormItem>

      <Select showArrow onChange={changeAccept} value={accept} style={widthStyle} mode="multiple">
        {fileDataSource.map((item) => (
          <Option key={item} value={item}>
            {item}
          </Option>
        ))}
      </Select>


      <FormItem className="antd-form-item-row" label="显示上传人">
        <Checkbox onChange={(e) => changeControlProps(
          'uploadProps',
          update(options.uploadProps, {
            showUploadName: { $set: e.target.checked },
          }),
          true
        )} checked={options.uploadProps?.showUploadName !== false} />
      </FormItem>


      <FormItem className="antd-form-item-row" label="显示上传时间">
        <Checkbox onChange={(e) => changeControlProps(
          'uploadProps',
          update(options.uploadProps, {
            showUploadTime: { $set: e.target.checked },
          }),
          true
        )} checked={options.uploadProps?.showUploadTime !== false} />
      </FormItem>

    </>
  );
};

export default UploadController;
